<!DOCTYPE html>
<html>
<head>
	<title>jQuery Horizontal Slideshow</title>
</head>

<body>
	<style>
		#slider {width: 450px; height: 250px; padding:0; border:0;}
		#slider img {padding: 0; margin:0; border:0;}
		#slider .clicker a {width: 11px; height: 11px; background: #fff; margin-right: 2px; border-radius: 5px; -moz-border-radius: 5px;}
		#slider .clicker a.active {background: #ff0;}
	</style>

	<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> 
	<script src="jquery.hslide.min.js"></script> 
	<script>
		$(function(){
			$('#slider').hslide();
		});
	</script>

	<div id="slider">
		<div><img src="http://placehold.it/450x250&text=1"></img></div>
		<div style="background-color: #000;"><iframe width="294" height="220" src="http://www.youtube.com/embed/rdNdmc83xe4" frameborder="0" allowfullscreen style="margin: 10px 25px;"></iframe></div>
		<div><img src="http://placehold.it/450x250&text=3"></img></div>
		<div><img src="http://placehold.it/450x250&text=4"></img></div>
		<div><img src="http://placehold.it/450x250&text=5"></img></div>
	</div>
</body>
</html>
